function line(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	var series = []
	res.datas.forEach((item, index) => {
		series.push({
			data: item.item,
			name: res.names[index],
			type: 'line',
			symbolSize: 6,
			smooth: res.smooth,
			lineStyle: {
				color: item.color,
			},
			areaStyle: {
				color: item.acolor
			},
			symbol: res.symbol,
			itemStyle: {
				normal: {
					color: item.color
				}
			}
		})
	});
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		color: ['#01F3BD', '#00C8FF', '#FCC556'],
		legend: {
			data: res.names,
			icon: 'rect',
			itemHeight: 12,
			itemWidth: 12,
			itemGap: 55,
			right: '3%',
			textStyle: {
				color: '#fff',
				fontSize: 14,
				padding: [0, 0, 0, 10]
			}
		},
		grid: {
			left: '0%',
			right: '3%',
			top: '25%',
			bottom: '3%',
			containLabel: true
		},
		yAxis: [{
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(19, 134, 237, 0.3)'
				},
			},
			axisLabel: {
				interval: 0,
				margin: 20,
				textStyle: {
					color: '#D4E4F2', //坐标的字体颜色
					top: 20,
					lineHeight: 20,
					fontSize: 16
				}
			},
			axisLine: {
				show: false,
			}
		}],
		xAxis: {
			type: 'category',
			data: res.datax,
			boundaryGap: true,
			axisLabel: {
				// interval: 0,
				textStyle: {
					color: '#D4E4F2', //坐标的字体颜色
					lineHeight: 20,
					fontSize: 16
				}
			},
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#1386ED',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		},
		series: series
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function pie(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	var RealData = [];
	var borderData = [];
	res.map((item, index) => {
		RealData.push({
			name: item.name,
			value: item.value,
			itemStyle: {
				normal: {
					color: item.areaColor
				}
			}
		});
		borderData.push({
			name: item.name,
			value: item.value,
			itemStyle: {
				normal: {
					color: item.borderStartColor,
					shadowColor: item.borderStartColor,
					shadowBlur: 5
				}
			}
		});
	});
	option = {
		tooltip: {
			formatter: "{a}：<br/>{b}: {c}次"
		},
		series: [
			// 主要展示层的
			{
				radius: ['40%', '70%'],
				center: ['50%', '50%'],
				type: 'pie',
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				animation: false,
				hoverAnimation: false,
				name: "近七天攻击防护统计",
				data: RealData,

			},
			// 边框的设置
			{
				radius: ['80%', '70%'],
				center: ['50%', '50%'],
				type: 'pie',
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				animation: false,
				hoverAnimation: false,
				tooltip: {
					show: false
				},
				data: borderData
			}
		]
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function bar(res, dom,key) {
	if(key<0){
		key=0
	}
	var myChart = echarts.init(document.getElementById(dom));
	var series=[]
	res.datas.forEach((item,index)=>{
		series.push({
			name:res.names[index],
				data:item.data.slice(key,key+5),
				type: 'bar',
				stack: 'one',
				itemStyle: {
					borderWidth: 0,
					color: item.color,
				},
				barWidth: 12,
				label: {
					show: true,
					width: 5,
					height: 12,
					fontSize:0,
					backgroundColor:item.bgcolor,
					position:['100%',0,0,0],
				},
			},)
	})
	option = {		
		tooltip: {
			formatter: "{a}：<br/>{b}: {c}"
		},
		color:['#01F3BD','#00C8FF','#FCC556'],
		legend: {
			data: res.names,
			icon: 'rect',
			itemHeight: 12,
			itemWidth: 12,
			itemGap: 20,
			textStyle: {
				color: '#D4E4F2',
				fontSize: 14,
				padding: [0, 0, 0, 10]
			}
		},
		grid: {
			left: '5%',
			right: '8%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				margin: 10,
				interval: 0,
				textStyle: {
					color: '#D4E4F2', //坐标的字体颜色
					top: 20,
					lineHeight: 20,
					fontSize: 14
				}
			},
			splitLine: {
				show: false,
			},

		},
		yAxis: {
			data:res.dataY.slice(key,key+5),
			type: 'category',
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				interval: 0,
				margin: 20,
				textStyle: {
					color: '#D4E4F2', //坐标的字体颜色
					top: 20,
					lineHeight: 14,
					fontSize: 14
				}
			},
			splitLine: {
				show: false,
			},
		},
		series: series
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}
var currentIndex=-1	
function randerMap(res,dom){
	var myChart = echarts.init(document.getElementById(dom));
	var data2=[]
	res.data1.forEach(item=>{
		data2.push(...item.list)
	})
	var uploadedDataURL = "js/data2.json";
	$.getJSON(uploadedDataURL, function(geoJson) {
		
		echarts.registerMap('china', geoJson);
		option = {
			tooltip : {
				trigger: 'item', 
				formatter:function(params, ticket, callback){
					if(params.seriesType=="effectScatter") {
						return params.data.name+" : "+params.data.value[2];
					}else{
						return parseInt(params.value)? params.name+' : '+params.value:params.name;
					}
				} 
			},
			geo: {
				map: 'china',
				zoom: 1.3, //当前视角的缩放比例
				aspectScale: 0.86,
				layoutCenter: ["50%", "50%"], //地图位置
				layoutSize: '100%',
				itemStyle: {
					normal: {
						shadowColor: 'rgba(3,147,195,1)',
						shadowOffsetX: -10,
						shadowOffsetY: 15,
						opacity:1,
						shadowBlur: 3
					}
				},
				regions: [{
					name: '南海诸岛',
					itemStyle: {
						areaColor: '#103466',
						borderColor: '#fff',
						normal: {
							label: {
								show: true,
								color: "#fff",
							}
						},
					},
				}],
			},
			series: [
				// 常规地图
				{
					type: 'map',
					mapType: 'china',
					aspectScale: 0.85,
					layoutCenter: ["50%", "50%"], //地图位置
					layoutSize: '100%',
					zoom: 1.3, //当前视角的缩放比例
					itemStyle: {
						normal: {
							shadowColor: '#a3c3e2',
							shadowBlur: 10,
							areaColor: '#124ea8',
							borderColor: '#78aeff',
							borderWidth: 2,
							label: {
								show: true,
								color: "#fff",
								formatter:function(params, ticket, callback){
									return parseInt(params.value)>0?params.name+'\n'+params.value:params.name
								}
							}
						},
						emphasis: {
							areaColor: 'rgb(10,60,83)',
							label: {
								color: "#fff"
							}	
						}
					},	
					data:res.data1
				},
				{
					type: 'effectScatter',
					coordinateSystem: 'geo',
					zlevel: 2,
					rippleEffect: {
						brushType: 'stroke'
					},
					label: {
						normal: {
							show: false,
							position: 'bottom',
							formatter: '{b}',
							fontSize:16,
							color:'#fff'							
						}
					},
					symbolSize:function(a){
						if(a&&a[2]){
							return a[2]*0.03;
						}
						
					},
					itemStyle: {
						normal: {
							color: 'yellow',							
						},
						emphasis: {
							areaColor: '#2B91B7'
						}
					},
					data:data2
					 
				}
			],
		}
		
	myChart.on('click',function(params){
		if(currentIndex==params.dataIndex){
			$('.tan .close').click()
			return;
		}
		currentIndex=params.dataIndex
		if(!params.data||!params.data.list||params.data.list.length==0){
			myChart.dispatchAction({
				type:'unselect',
				seriesIndex:0,
				dataIndex:[currentIndex],
			})
			return;
		}
		$('.tan .city').text(params.name)
		$('.tan .tbody').html('')
		params.data.list.forEach(item=>{
			$('.tan .tbody').append(`
			<li>
				<span class="s1">${item.name}</span>
				<span class="s2 ${item.email=='未开通'?'error':''}">${item.email}</span>
				<span class="s3 ${item.check=='未开通'?'error':''}">${item.check}</span>
				<span class="s4 ${item.trans=='未开通'?'error':''}">${item.trans}</span>
			</li>
			`)
		})
		$('.tan').show()
		
	})
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
	});
	$('.tan .close').click(function(){
		myChart.dispatchAction({
			type:'unselect',
			seriesIndex:0,
			dataIndex:[currentIndex],
		})
		currentIndex=-1
		$('.tan').hide()
	})
	
}
function randerLeg(res){
	$('.centerDiv .box1 .list ul').html('')
	var total=0
	res.forEach(item=>{
		total+=item.value
	})
	res.forEach(item=>{
		$('.centerDiv .box1 .list ul').append(`
		<li class="clearfix ${selectColor((item.value/total).toFixed(3)*100)}">
			<span>所占</span>
			<span class="col">${(item.value/total).toFixed(3)*100} <font>%</font></span>
			<span>${item.name}</span>
		</li>
		`)
	})
}


function selectColor(num){
	var res=''
	if(num<10){
		res= 'col1'
	}else if(num<20){
		res= 'col2'
	}else if(num<40){
		res= 'col3'
	}else{
		res= 'col4'
	}			
	return res;
}